<template>
  <ul class="tabbar-items-wrapper border-top-1px">
    <li
      v-for="(item, index) in items"
      :key="index"
      class="tabbar-item"
      :class="{ 'active': currentIndex === index }"
      @click="handleClick(index)"
    >
      <span class="icon">
        <img :src="'/tabbar/' + item.icon + '-active@3x.png'" v-if="currentIndex === index" />
        <img :src="'/tabbar/' + item.icon + '@3x.png'" v-else />
        <b v-if="item.icon === 'cart' && $store.getters['ExecCart/total'] > 0">{{ $store.getters['ExecCart/showTotal'] }}</b>
      </span>
      <span class="name" :class="{ 'active': currentIndex === index }">{{ item.name }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TabbarItems',
  computed: {
    currentIndex() {
      const url = this.$route.path
      const index = this.items.findIndex((value, index) => {
        const u = `/${value.icon}`
        if (url === u) {
          return index
        }
      })
      return index === -1 ? 0 : index
    }
  },
  data() {
    return {
      items: [
        { name: '首页', icon: 'home' },
        // { name: '拼团', icon: 'group' },
        { name: '分类', icon: 'category' },
        // { name: '全部商品', icon: 'category' },
        // { name: '推广码', icon: 'category' },
        // { name: '商家', icon: 'merchant' },
        { name: '素材库', icon: 'material' },
        { name: '购物车', icon: 'cart' },
        // { name: '种草', icon: 'article' },
        { name: '我的', icon: 'center' }
      ]
    }
  },
  methods: {
    handleClick(index) {
      if (index === 1) {
        // return this.$router.push({ path: '/product/list' })
        // return this.$router.push({ path: '/service/qr-code' })
      }
      this.$router.push({ path: `/${this.items[index].icon}` })
      // if (index === 1) {
      //   this.$router.push({ path: '/product/category' })
      //   // this.$router.push({ path: '/article' })
      // } else {
      //   this.$router.push({ path: `/${this.items[index].icon}` })
      // }
    }
  }
}
</script>

<style scoped lang="stylus">
.tabbar-items-wrapper
  position fixed
  left 0
  bottom 0
  height 50px
  width 100%
  z-index 100
  box-sizing border-box
  background white
  display flex
  .tabbar-item
    flex 1
    display inline-block
    color #191919
    position relative
    .icon
      display block
      margin 5px 0 3px 0
      img
        //background red
        width 20px
        height 20px
      b
        position absolute
        display inline-block
        min-width 20px
        height 20px
        line-height 20px
        border-radius 50%
        margin-top -10px
        margin-left -10px
        background $main_color
        color white
        font-weight 700
        opacity 0.75
        padding 1.5px
        font-style normal
    .name
      &.active
        //color $main_color
        color #d81b0a
        font-weight 700
</style>
